<template>
    <div class="xqbx">
        <el-card class="box-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <h3>{{ termPerformance.title }}</h3>
                </div>
            </template>
            <div class="card-content">
                <div class="image-wrapper chart" v-if="termPerformance.title == '三年综合素质发展趋势'">
                    <!-- 使用封装的Echarts组件 -->
                    <EchartsComponent :option="getChartOption('trend')" height="400px" />
                </div>
                <div class="card-content-bottom" v-if="termPerformance.title !== '学业成绩分析' && termPerformance.title !== '学期表现记录'">

                    <div class="card-content-item" v-for="item in termPerformance.data" :key="item" :style="{ backgroundColor: item.color }">
                        <div class="card-content-item-header">
                            <component :is="item.icon"
                                :style="{ width: '45px', height: '45px', padding: '10px', borderRadius: '50%', backgroundColor: 'white' }" />
                            <h3>
                                {{ item.title }}
                                <br>
                                <span  v-if="termPerformance.title == '班主任评语与建议'">{{ item.bzr }}</span>
                                <span v-if="termPerformance.title == '个人陈述'">学生本人陈述 · {{ item.time }}</span>
                            </h3>
                        </div>
                        <p>{{ item.content }}</p>
                        <div>
                            <el-icon>
                                <rise />
                            </el-icon>
                            <h3>{{ item.score}}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-content xycjfx">
                <div class="image-wrapper chart" v-if="termPerformance.title == '学业成绩分析'">
                    <EchartsComponent :option="getChartOption('xqcj')" height="400px" />
                </div>

                <el-table :data="termPerformance.data" v-if="termPerformance.title == '学业成绩分析'">
                    <el-table-column v-for="value in termPerformance.columns" :key="value.prop" :prop="value.prop"
                        :label="value.label" />
                </el-table>

                <div class="image-wrapper chart" v-if="termPerformance.title == '学业成绩分析'">
                    <EchartsComponent :option="getChartOption('xkqr')" height="400px" />
                </div>
            </div>

            <div class="card-content gwdpj">
                <div class="image-wrapper chart" v-if="termPerformance.title == '各维度评价得分'">
                    <EchartsComponent :option="getChartOption('gwdpj')" height="400px" />
                </div>
            </div>

            <div class="card-content xqbxjl" v-if="termPerformance.title == '学期表现记录'">
               <div class="xqbxjl_left">
                <h3>
                    <el-icon><circle-plus /></el-icon>
                    奖励与荣誉
                </h3>
                <div class="xqbxjl_left_item">
                    <h4>
                        <span>校级优秀学生干部</span>
                        <span>2025-6-12</span>
                    </h4>
                    <p>2023-2024学年春季学期被评为校级优秀学生</p>
                </div>
               </div>
               <div class="xqbxjl_right">
                <h3>
                    <el-icon><checked /></el-icon>
                    重要活动参与
                </h3>
                <div class="xqbxjl_right_item">
                    <h4>
                        <span>校级1000米</span>
                        <span>2025-6-12</span>
                    </h4>
                    <p>2023-2024学年春季学期参与了重要活动</p>
                  </div>
               </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
// 可以添加必要的导入和逻辑
import { ref, reactive, defineProps, onMounted, onUnmounted, nextTick } from 'vue';
import dropdownYear from '@/components/dropdownYear.vue';
// 导入封装的Echarts组件
import EchartsComponent from '@/components/EchartsComponent.vue';


const props = defineProps({
    termPerformance: {
        type: Object,
        default: () => { }
    }
})

// 状态管理
const isMobile = ref(false)
// 检测设备类型
const checkDeviceType = () => {
    const width = window.innerWidth
    isMobile.value = width < 768 // 768px为断点
}


let getChartOption = (chartType) => {
    if (chartType === 'trend') {
        return {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '5%',
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['初一上学期', '初一下学期', '初二上学期', '初二下学期', '初三上学期', '初三下学期']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        }
    } else if (chartType === 'xkqr') {
        return {
            title: {
                text: '成绩对比',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    // 自定义tooltip内容，区分个人成绩和班级平均分
                    if (params.seriesName === '个人成绩') {
                        return `${params.name}<br/>${params.seriesName}: ${params.value}`;
                    }
                    return `${params.name}<br/>${params.seriesName}: ${params.value}`;
                }
            },
            xAxis: {
                type: 'category',
                data: ['语文', '数学', '英语', '物理', '历史']
            },
            yAxis: {
                type: 'value',
                name: '分数',
                min: 70,
                max: 100
            },
            series: [
                {
                    name: '个人成绩',
                    type: 'bar',
                    data: [85, 96, 82, 90, 83], // 个人成绩数据，可根据实际动态替换
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        color: '#5793f3' // 个人成绩柱子颜色
                    }
                },
                {
                    name: '班级平均分',
                    type: 'bar',
                    data: [80, 85, 79, 82, 77], // 班级平均分数据，可根据实际动态替换
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        color: '#c4c4c4' // 班级平均分柱子颜色
                    }
                }
            ]

        }
    } else if (chartType === 'xqcj') {
        return {
            title: {
                text: '学期成绩趋势',
                left: 'left'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    // 自定义 tooltip 内容，显示清晰的信息
                    const item = params[0];
                    return `${item.axisValue}<br/>
                ${item.seriesName}: ${item.value} 分`;
                }
            },
            legend: {
                data: ['个人总分', '班级平均分'],
                right: '10%'
            },
            xAxis: {
                type: 'category',
                data: ['上学期期末', '本学期期中', '本学期期末'],
                axisLabel: {
                    color: '#333'
                }
            },
            yAxis: {
                type: 'value',
                name: '分数',
                min: 600,
                max: 760,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name: '个人总分',
                    type: 'line',
                    data: [680, 720, 750],
                    lineStyle: {
                        color: '#1890ff'
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                {
                    name: '班级平均分',
                    type: 'line',
                    data: [650, 670, 680],
                    lineStyle: {
                        color: '#999'
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ]
        }
    } else if (chartType === 'gwdpj') {
        return {
            title: {
                text: '', // 可根据需求设置标题，如“综合素质雷达图”
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['个人得分', '班级平均分'],
                top: '10%',
                left: 'center'
            },
            radar: {
                // 配置雷达图的维度
                indicator: [
                    { name: '思想品德', max: 100 },
                    { name: '学业水平', max: 100 },
                    { name: '身心健康', max: 100 },
                    { name: '艺术素养', max: 100 },
                    { name: '社会实践', max: 100 }
                ],
                radius: '60%',
                center: ['50%', '55%']
            },
            series: [
                {
                    name: '个人得分',
                    type: 'radar',
                    data: [
                        {
                            value: [90, 85, 88, 80, 92], // 个人在各维度的得分，按需替换
                            name: '个人得分'
                        }
                    ],
                    lineStyle: {
                        color: '#1890ff'
                    },
                    areaStyle: {
                        color: 'rgba(24, 144, 255, 0.2)'
                    }
                },
                {
                    name: '班级平均分',
                    type: 'radar',
                    data: [
                        {
                            value: [80, 75, 80, 70, 82], // 班级平均在各维度的得分，按需替换
                            name: '班级平均分'
                        }
                    ],
                    lineStyle: {
                        color: '#999'
                    },
                    areaStyle: {
                        color: 'rgba(153, 153, 153, 0.2)'
                    }
                }
            ]
        }
    }
}


onMounted(() => {
    checkDeviceType() //pc、h5判断
    window.addEventListener('resize', checkDeviceType)
});

onUnmounted(() => {
    window.removeEventListener('resize', checkDeviceType)
});

</script>

<style scoped lang="scss">
.xqbx {
    margin: 10px 0;

    .box-card {
        border-radius: 10px;

        ::v-deep .el-card__header {
            border-bottom: 0px;
        }

        .card-content {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            gap: 40px;

            .card-content-bottom {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                padding: 0 20px;

                /* 子元素之间的间距为20px（水平方向） */
                .card-content-item {
                    display: flex;
                    flex: 1;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: #eff6ff;
                    padding: 20px;
                    border-radius: 20px;

                    div.card-content-item-header {
                        margin: 10px 0;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 10px;

                        h3 {

                            span {
                                color: #6b7280;
                                font-size: 12px;
                                font-weight: normal;
                            }
                        }
                    }

                    p {
                        color: #374151;
                        line-height: 1.6;
                        text-indent: 2em;
                    }
                }
            }

            // ecahrts 
            .image-wrapper {
                flex: 1;
                min-height: 400px;
                /* 确保有足够的高度 */
                width: 100%;

                .responsive-image {
                    width: 100%;
                    height: 100%;
                }

                .image-error {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: #909399;
                }
            }

            .el-table {
                width: 100%;

                .el-table__header,
                .el-table__body {
                    width: 100% !important;
                }
            }

        }

        .xqbxjl{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 30px;
            h3{
                padding:0 5px;
                color: #1F2937;
                font-weight: normal;
            }
            .xqbxjl_left{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 20px;
                .xqbxjl_left_item{
                    background-color: #f9fafb;
                    padding: 5px 10px;
                    h4{
                         font-weight: normal;
                        color: #1F2937;
                        display: flex;
                        justify-content: space-between;
                        margin: 10px 0;
                    }
                }
            }
            .xqbxjl_right{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 20px;
                .xqbxjl_right_item{
                    background-color: #f9fafb;
                    padding: 5px 10px;
                     h4{
                        font-weight: normal;
                        color: #1F2937;
                        display: flex;
                        justify-content: space-between;
                        margin: 10px 0;
                    }
                }
            }
        }
    }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .xqbx {
        .box-card {
            .card-content {
                display: flex;
                flex-direction: column;
                gap: 10px;

                .card-content-bottom {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 20px;

                    .card-content-item {
                        width: 100%;
                    }
                }

                .image-wrapper {
                    min-height: 300px;
                    /* 移动端减少高度 */
                }
            }
        }
    }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 480px) {
    .image-wrapper {
        min-height: 200px;
        /* 小屏幕进一步减少高度 */
    }
}
</style>
